import * as echarts from "echarts/core";
import {
  TooltipComponent,
  TooltipComponentOption,
  LegendComponent,
  LegendComponentOption,
} from "echarts/components";
import { PieChart, PieSeriesOption } from "echarts/charts";
import { LabelLayout } from "echarts/features";
import { SVGRenderer } from "echarts/renderers";
import  { useEffect } from "react";
import { myFavouriteSet } from "../../config/myFavourite";
import { hitokotoType } from "../../type/hitokoto";
import { translateHitokotoType } from "../../util/hitokotoTypeMap";
const calculatedQuantity = ()=> {
     const myFavouriteMap = new Map<hitokotoType,number>();
     [...myFavouriteSet].forEach(v=>{
        const quantity = myFavouriteMap.get(v.type)
         if(quantity===undefined){
            myFavouriteMap.set(v.type,1);
         }else{
            myFavouriteMap.set(v.type,quantity+1)
         }
     })
     return [...myFavouriteMap.entries()].map((v)=>({name:translateHitokotoType(v[0]),value:v[1]}));
}
echarts.use([
  TooltipComponent,
  LegendComponent,
  PieChart,
  SVGRenderer,
  LabelLayout,
]);
type EChartsOption = echarts.ComposeOption<
  TooltipComponentOption | LegendComponentOption | PieSeriesOption
>;

export default function MyChart(): JSX.Element {
  useEffect(() => {
    const chartDom = document.getElementById("mychart")!;
    const myChart = echarts.init(chartDom, undefined, {
      renderer: "svg",
    });
    const option: EChartsOption = {
      tooltip: {
        trigger: "item",
      },
      legend: {
        top: "5%",
        left: "center",
      },
      series: [
        {
          type: "pie",
          radius: ["50%", "70%"],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: "#fff",
            borderWidth: 3,
          },
          label: {
            show: false,
            position: "center",
          },
          labelLine: {
            show: false,
          },
          data: calculatedQuantity()
        },
      ],
    };
    option && myChart.setOption(option);
    return ()=>{
        myChart.clear()
    }
  }, []);
  return (
    <div>
      <div id="mychart" style={{ width: "500px", height: "500px" }} />
    </div>
  );
}
